<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VR影院监控 - 游乐园信息管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
</head>

<body>
    <header class="header">
        <div class="header-container">
            <button class="mobile-menu-btn">☰</button>
            <div class="location">
                <span class="location-icon">📍</span>
                <span class="location-text">Beijing, China</span>
            </div>
            <nav class="main-nav">
                <!-- VR影院监控页面专用 - 导航项目已移除 -->
            </nav>
            <div class="user-actions">
                <a href="login.html" class="login-btn">登录使用更多功能</a>
                <a href="personal-center-monitor.html" class="user-icon">👤</a>
            </div>
        </div>
    </header>

    <aside class="sidebar">
        <div class="sidebar-header">
            <h3>项目详情</h3>
            <button class="collapse-btn" onclick="toggleSidebar()">◀</button>
        </div>
        <ul class="project-list">
            <li><a href="system-monitor.html">
                    <span class="project-icon">📊</span>
                    <span class="project-text">系统监控</span>
                </a></li>
            <li><a href="vr-cinema-monitor.html" class="active">
                    <span class="project-icon">🥽</span>
                    <span class="project-text">VR影院</span>
                </a></li>
            <li><a href="food-street-monitor.html">
                    <span class="project-icon">🍽️</span>
                    <span class="project-text">美食街</span>
                </a></li>
            <li><a href="traffic-stats.html">
                    <span class="project-icon">📈</span>
                    <span class="project-text">出入口客流统计</span>
                </a></li>
            <li><a href="personal-center-monitor.html">
                    <span class="project-icon">👤</span>
                    <span class="project-text">个人中心</span>
                </a></li>
        </ul>

        <div class="latest-notice">
            <h4>最新通知</h4>
            <div class="notice-content">
                <p>• VR影院维护完成，现已开放</p>
                <p>• 今日游客量较大，建议错峰游玩</p>
                <p>• 水上项目需预约救生衣</p>
                <p>• 夜间灯光秀今晚8点开始</p>
            </div>
        </div>
    </aside>

    <main class="main-content">
        <!-- VR影院监控 -->
        <section class="section" id="vrCinemaMonitorSection">
            <h4>🥽 VR影院监控</h4>
            
            <!-- 设备使用状态展示 -->
            <div class="monitor-section">
                <h5>设备状态</h5>
                <div class="device-status-grid">
                    <div class="device-status-card">
                        <div class="device-info">
                            <span class="device-icon">🥽</span>
                            <span class="device-name">VR设备1</span>
                        </div>
                        <div class="device-status">
                            <span class="status-indicator" id="device1Status">空闲</span>
                            <span class="device-time" id="device1Time">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="device-status-card">
                        <div class="device-info">
                            <span class="device-icon">🥽</span>
                            <span class="device-name">VR设备2</span>
                        </div>
                        <div class="device-status">
                            <span class="status-indicator" id="device2Status">使用中</span>
                            <span class="device-time" id="device2Time">5分钟前</span>
                        </div>
                    </div>
                    
                    <div class="device-status-card">
                        <div class="device-info">
                            <span class="device-icon">🥽</span>
                            <span class="device-name">VR设备3</span>
                        </div>
                        <div class="device-status">
                            <span class="status-indicator" id="device3Status">空闲</span>
                            <span class="device-time" id="device3Time">刚刚</span>
                        </div>
                    </div>
                    
                    <div class="device-status-card">
                        <div class="device-info">
                            <span class="device-icon">🥽</span>
                            <span class="device-name">VR设备4</span>
                        </div>
                        <div class="device-status">
                            <span class="status-indicator" id="device4Status">维护中</span>
                            <span class="device-time" id="device4Time">10分钟前</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 在线播放影片状态 -->
            <div class="monitor-section">
                <h5>在线播放影片</h5>
                
                <!-- VR设备1播放状态 -->
                <div class="device-movie-group">
                    <div class="device-movie-header">
                        <h6>🥽 VR设备1 - 播放状态</h6>
                    </div>
                    <div class="current-movie-info">
                        <div class="movie-header">
                            <div class="movie-title">
                                <span class="movie-icon">🎬</span>
                                <span class="movie-name" id="device1MovieName">太空探险</span>
                            </div>
                            <div class="movie-status">
                                <span class="status-badge playing" id="device1MovieStatus">正在播放</span>
                                <span class="play-time" id="device1PlayTime">15:30</span>
                            </div>
                        </div>
                        
                        <div class="movie-segments">
                            <h6>影片片段加载状态</h6>
                            <div class="segments-grid">
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段1</span>
                                        <span class="segment-duration">0-5分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device1Segment1Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device1Segment1Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段2</span>
                                        <span class="segment-duration">5-10分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device1Segment2Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device1Segment2Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段3</span>
                                        <span class="segment-duration">10-15分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device1Segment3Progress" style="width: 85%"></div>
                                        </div>
                                        <span class="status-text" id="device1Segment3Status">加载中</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段4</span>
                                        <span class="segment-duration">15-20分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device1Segment4Progress" style="width: 45%"></div>
                                        </div>
                                        <span class="status-text" id="device1Segment4Status">加载中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- VR设备2播放状态 -->
                <div class="device-movie-group">
                    <div class="device-movie-header">
                        <h6>🥽 VR设备2 - 播放状态</h6>
                    </div>
                    <div class="current-movie-info">
                        <div class="movie-header">
                            <div class="movie-title">
                                <span class="movie-icon">🎬</span>
                                <span class="movie-name" id="device2MovieName">深海探索</span>
                            </div>
                            <div class="movie-status">
                                <span class="status-badge playing" id="device2MovieStatus">正在播放</span>
                                <span class="play-time" id="device2PlayTime">08:45</span>
                            </div>
                        </div>
                        
                        <div class="movie-segments">
                            <h6>影片片段加载状态</h6>
                            <div class="segments-grid">
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段1</span>
                                        <span class="segment-duration">0-5分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device2Segment1Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device2Segment1Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段2</span>
                                        <span class="segment-duration">5-10分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device2Segment2Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device2Segment2Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段3</span>
                                        <span class="segment-duration">10-15分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device2Segment3Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device2Segment3Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段4</span>
                                        <span class="segment-duration">15-20分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device2Segment4Progress" style="width: 75%"></div>
                                        </div>
                                        <span class="status-text" id="device2Segment4Status">加载中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- VR设备3播放状态 -->
                <div class="device-movie-group">
                    <div class="device-movie-header">
                        <h6>🥽 VR设备3 - 播放状态</h6>
                    </div>
                    <div class="current-movie-info">
                        <div class="movie-header">
                            <div class="movie-title">
                                <span class="movie-icon">🎬</span>
                                <span class="movie-name" id="device3MovieName">恐龙世界</span>
                            </div>
                            <div class="movie-status">
                                <span class="status-badge playing" id="device3MovieStatus">正在播放</span>
                                <span class="play-time" id="device3PlayTime">12:15</span>
                            </div>
                        </div>
                        
                        <div class="movie-segments">
                            <h6>影片片段加载状态</h6>
                            <div class="segments-grid">
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段1</span>
                                        <span class="segment-duration">0-5分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device3Segment1Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device3Segment1Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段2</span>
                                        <span class="segment-duration">5-10分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device3Segment2Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device3Segment2Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段3</span>
                                        <span class="segment-duration">10-15分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device3Segment3Progress" style="width: 60%"></div>
                                        </div>
                                        <span class="status-text" id="device3Segment3Status">加载中</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段4</span>
                                        <span class="segment-duration">15-20分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device3Segment4Progress" style="width: 20%"></div>
                                        </div>
                                        <span class="status-text" id="device3Segment4Status">加载中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- VR设备4播放状态 -->
                <div class="device-movie-group">
                    <div class="device-movie-header">
                        <h6>🥽 VR设备4 - 播放状态</h6>
                    </div>
                    <div class="current-movie-info">
                        <div class="movie-header">
                            <div class="movie-title">
                                <span class="movie-icon">🎬</span>
                                <span class="movie-name" id="device4MovieName">未来城市</span>
                            </div>
                            <div class="movie-status">
                                <span class="status-badge playing" id="device4MovieStatus">正在播放</span>
                                <span class="play-time" id="device4PlayTime">03:20</span>
                            </div>
                        </div>
                        
                        <div class="movie-segments">
                            <h6>影片片段加载状态</h6>
                            <div class="segments-grid">
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段1</span>
                                        <span class="segment-duration">0-5分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device4Segment1Progress" style="width: 100%"></div>
                                        </div>
                                        <span class="status-text" id="device4Segment1Status">已加载</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段2</span>
                                        <span class="segment-duration">5-10分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device4Segment2Progress" style="width: 90%"></div>
                                        </div>
                                        <span class="status-text" id="device4Segment2Status">加载中</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段3</span>
                                        <span class="segment-duration">10-15分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device4Segment3Progress" style="width: 30%"></div>
                                        </div>
                                        <span class="status-text" id="device4Segment3Status">加载中</span>
                                    </div>
                                </div>
                                
                                <div class="segment-item">
                                    <div class="segment-info">
                                        <span class="segment-name">片段4</span>
                                        <span class="segment-duration">15-20分钟</span>
                                    </div>
                                    <div class="segment-status">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="device4Segment4Progress" style="width: 0%"></div>
                                        </div>
                                        <span class="status-text" id="device4Segment4Status">等待中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="js/api-service.js"></script>
    <script src="js/main.js"></script>
    <script src="js/visitor-statistics.js"></script>
    <script src="js/vr-cinema-monitor.js"></script>
</body>

</html>
